<template>
  <div>
	  <el-col :span="3">
	      <el-input placeholder="电影名" v-model="information.filmName"></el-input>
	  </el-col>
	  <el-col :span="3">
	      <el-input placeholder="详情" v-model="information.info"></el-input>
	  </el-col>
	  <el-button type="primary" round @click="queryInformation()">查询</el-button>

      <el-button type="primary" @click="showAddShop" >添加电影</el-button>

      <el-button type="danger" @click="deleteShop" >删除电影</el-button>


    <!--分页-->
    <el-pagination
      :page-size="page.pageSize"
      :total="page.totalCount"
      :current-page.sync="page.pageNo"
      @current-change="initTableData"
      layout="total, prev, pager, next, jumper">
    </el-pagination>

    <!--表格内容-->
    <el-table
      ref="list"
      :data="tableData"
      style="width: 100%"
      border
      stripe
      highlight-current-row
      @row-click="handleRowClick"
      @select-all="handleCheckedAllAndCheckedNone"
      @select="handleCheckedAllAndCheckedNone">

      <el-table-column
        type="selection"
        width="45"
        align="center">
      </el-table-column>
      <el-table-column
        type="index"
        label="序号"
        width="50">
      </el-table-column>
      <el-table-column
        property="filmName"
        label="电影名"
        width="180">
      </el-table-column>
      <el-table-column
        property="typeName"
        label="电影类型">
      </el-table-column>
       <el-table-column
        property="price"
        label="价格">
      </el-table-column>
      <el-table-column
        property="cinemaId"
        label="影院编号">
      </el-table-column>
      <el-table-column
        property="count"
        label="剩余票数">
      </el-table-column>
      <el-table-column
        property="performerName"
        label="演员">
      </el-table-column>
	  <el-table-column
	    property="endTime"
	    label="结束时间">
	  </el-table-column>
	  <el-table-column
	    property="time"
	    label="时间">
	  </el-table-column>
	  <el-table-column
	    property="info"
	    label="详情">
	  </el-table-column>
	 <el-table-column
      property="images"
        label="图片">
        <template slot-scope="scope">
							<el-image
							      style="width: 160px;"
							      :src="`http://localhost:8082/file/${scope.row.images}`"
							      fit="cover">
						     </el-image>
					  </template>
      </el-table-column>
	  <el-table-column
	    property="commentId"
	    label="评论">
	  </el-table-column>
	  <el-table-column
	    property="score"
	    label="评分">
	  </el-table-column>
      <el-table-column
        label="操作"
        width="130"
        align="center">
        <template slot-scope="scope">
          <el-button circle icon="el-icon-edit-outline" type="primary" title="编辑" size="small"
            @click="rowEdit(scope.$index, scope.row)"></el-button>
          <el-button circle icon="el-icon-delete" type="danger" title="删除" size="small"
            @click="rowDel(scope.row.id);"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--编辑-弹出层-->
    <el-dialog
      :title="dialogName"
      :visible.sync="isShowEditDialog"
      width="600px"
      @close="dialogClose">
      <el-form
        ref="editForm"
        :model="shop"
        label-width="55px">

        <el-form-item label="电影名"  prop="filmName">
           <el-input v-model="shop.filmName"></el-input>
        </el-form-item>
		<el-form-item label="电影类型">
		    <el-select v-model="shop.typeId" placeholder="请选择电影类型">
        <el-option label="" value="1">战争片</el-option>
		    <el-option label="" value="2">动作片</el-option>
		    <el-option label="" value="3">爱情片</el-option>
        <el-option label="" value="4">科幻片</el-option>
        <el-option label="" value="5">古装片</el-option>
        <el-option label="" value="6">恐怖片</el-option>
        <el-option label="" value="7">喜剧片</el-option>
        <el-option label="" value="8">其他</el-option>
		</el-select>
		</el-form-item>
        <el-form-item label="价格" prop="price">
          <el-input v-model="shop.price"></el-input>
        </el-form-item>
		<el-form-item label="影院编号" prop="cinemaId">
		  <el-input v-model="shop.cinemaId"></el-input>
		</el-form-item>
        <el-form-item label="剩余票数" prop="count">
          <el-input v-model="shop.count"></el-input>
        </el-form-item>
		<el-form-item label="演员ID" prop="performerId">
		  <el-input v-model="shop.performerId"></el-input>
		</el-form-item>
		<el-form-item label="结束时间" prop="endTime">
		  <el-input v-model="shop.endTime"></el-input>
		</el-form-item>
		<el-form-item label="时间" prop="time">
		  <el-input v-model="shop.time"></el-input>
		</el-form-item>
		<el-form-item label="详情" prop="info">
		  <el-input v-model="shop.info"></el-input>
		</el-form-item>

        <el-form-item label="电影封面">
				 <el-upload
				   action="http://localhost:8082/film/upload"
				   list-type="picture-card"
				   :show-file-list="true"
				   :on-success="getImageUrl"
				   >
				     <el-image v-if="shop.images"
				         style="width: 110px; height: 110px"
				         :src="`http://localhost:8082/file/${shop.images}`"
				         fit="cover">
				   </el-image>
				   <i v-else class="el-icon-plus"></i>
				 </el-upload>
                  </el-form-item>
				  <el-form-item label="评论" prop="commentId">
				    <el-input v-model="shop.commentId"></el-input>
				  </el-form-item>
				  <el-form-item label="评分" prop="score">
				    <el-input v-model="shop.score"></el-input>
				  </el-form-item>



        <el-form-item>
          <el-button type="primary" @click="handleEdit(shop.id)" class="pull-right margin-l-25">确定</el-button>
          <el-button @click="cancelEdit" class="pull-right">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios';
  export default {
    name: "Table",
    data() {
      return {
        information:{
          filmName:'',
          info:''
        },
        dialogName: '' , //编辑框显示名称
        typeList: [], // 类别集合
        shop: {
          id: null,
          filmName: '',
          typeName:'',
          price: '',
          cinemaId: '',
          count: 0,
          performerId:'',
          performerName:'',
          endTime: '',
          time:'',
          info:'',
          images:'',
          commentId:'',
          score:0,
          },
          page:{ //分页参数
            pageNo : 1,
            pageSize: 4,
            totalCount: 0
          },
          //商品数据列表
          tableData: [],
          isShowEditDialog: false
      }
    },
    methods: {
        //上传成功之后的回调函数
			  getImageUrl(res,file){
				  //返回的是图片上传的图片名
				  this.shop.images = res ;
			  },
			  //显示添加电影页面
			  showAddShop(){
			    this.dialogName = '添加电影'
			    this.isShowEditDialog = true;
			  },
      handleRowClick(row, event, column) {
        // 仅选中当前行
        this.setCurRowChecked;
      },
      handleCheckedAllAndCheckedNone(selection) {

        // 当前选中仅一行时操作-（当前表格行高）
        1 != selection.length && this.$refs.list.setCurrentRow();
      },
      dialogClose() {

        // 清空编辑表单
        this.$refs.editForm.resetFields();
      },
      //显示编辑电影页面
      rowEdit(index, row) {
       this.dialogName = '编辑电影'
       this.shop = row
       this.isShowEditDialog = true;
      },
      //取消后，清掉弹出框内容
      cancelEdit(){
        this.shop = {}
        this.isShowEditDialog = false;
      },
      //批量删除
      deleteShop(){

       var sels=this.$refs.list.selection; //获取所有选择的行
       var ids=[];
       ids=sels.map(shop=>shop.id)
       console.log(ids)

       this.$confirm('确定要删除当前选中的行吗？', '删除', {
          comfirmButtonText: '确定',
          cancelButtonText: '取消'
        }).then(() => {
          axios.post('http://localhost:8082/film/deleteByIds?ids='+ids)

               .then(res =>{
                   if(res.data.code == 200){
                         this.$message.success('删除成功');
                         this.initTableData();
                   }else{
                    this.$message.success('删除失败!');
                   }
               })
          return false;
        });
        console.log("+++++++"+ids)
      },

      handleEdit(id) {

        this.$refs.editForm.validate(isValid => {
        console.log("+++this.shop++++"+this.shop)
          if (!isValid) return;

          // 保存编辑后的数据
         axios.get('http://localhost:8082/film/save',{params:this.shop})

              .then(res =>{

                   if(res.data.code == 200){
                    //编辑完成后,去掉编辑弹出框
                     this.isShowEditDialog = false;

                     // 考虑到可能编辑了日期-需要重新排序
                     // ***注意：手动排序传参和表格的default-sort属性格式不太一样

                     this.$message.success('保存成功');
                     this.initTableData()
                   }else{
                     this.isShowEditDialog = false;

                     // 考虑到可能编辑了日期-需要重新排序
                     // ***注意：手动排序传参和表格的default-sort属性格式不太一样

                     this.$message.success('保存失败');
                   }
              })



        });
      },

      rowDel(id) {

        this.$confirm('确定要删除当前行吗？', '删除', {
          comfirmButtonText: '确定',
          cancelButtonText: '取消'
        }).then(() => {
          axios.post('http://localhost:8082/film/deleteFilm?id='+ id)
               .then(res =>{
                   if(res.data.code == 200){
                         this.$message.success('删除成功');
                         this.initTableData();
                   }
               })
          return false;
        });
      },
	  queryInformation(){
	      console.log(this.information)
	        // 保存编辑后的数据
	        axios.get('http://localhost:8082/film/getFilmInformation',{params:this.information})

	          .then(res =>{
	              if(res.data.code == 200){
	                  this.page.totalCount = res.data.data.total
	                  this.tableData = res.data.data.list
	              }
	          })
	  },

      //初始化table数据
      initTableData(){
        console.log("pageNo :  " + this.page.pageNo)
         axios.get('http://localhost:8082/film/getPageFilm',{params: this.page})
              .then(res =>{
                   if(res.data.code == 200){
                      this.page.totalCount = res.data.data.total
                      this.tableData = res.data.data.list
                   }
              })
      },
      //初始化类别数据
      initTypeData(){
        axios.get('http://localhost:8082/film/getPageFilm')
             .then(res => {
                 this.typeList = res.data.list
             })
      }
    },
    mounted(){
       this.initTableData()
       this.initTypeData()

    }

    }

</script>

<style scoped lang="less">
.el-form {
  padding: 0 10px;
}
.el-date-editor {
  width: 100% !important;
}
</style>
